<template>
  <div class="system">
    <div class="table-top">
      <div class="inputBox">
        <el-input placeholder="搜索" v-model="searchVal">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="chooseTime">
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <download-excel
          class="export-excel-wrapper"
          :data="tableData"
          type="xls"
          worksheet="My Worksheet"
          name="系统日志"
        >
          <el-button>导出</el-button>
        </download-excel>
      </div>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-style="{ borderColor: '#323233', border: 'none' }"
        :header-cell-style="{ background: '#272c37', borderColor: '#323233' }"
        :row-style="{ border: 'none' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column align="center" type="index" width="100" label="序号">
        </el-table-column>

        <el-table-column align="center" prop="behavior" label="行为">
        </el-table-column>
        <el-table-column
          align="center"
          prop="user"
          label="执行人"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="time"
          label="操作时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="dec"
          label="描述"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div class="controlImage">
              <img
                src="../../assets/image/Iconly／Light／Delete.png"
                alt=""
                @click="handleDelete(scope.$index, scope.row)"
              />
            </div>
          </template>
        </el-table-column> -->
      </el-table>

      <!-- 分页器 -->
      <div class="pagenation-box">
        <ElPagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ElPagination from "../../components/el-table-self/ElPagination.vue";

import downloadExcel from "vue-json-excel";
export default {
  components: { ElPagination, downloadExcel },
  data() {
    return {
      currentPage4: 1,
      dateValue: "",
      searchVal: "",
      tableData: [
        {
          behavior: "删除",
          user: "管理员",
          time: "2023.01.01",
          dec: "删除用户user1",
        },
        {
          behavior: "修改",
          user: "管理员",
          time: "2023.01.03",
          dec: "修改用户user1名字",
        },
        {
          behavior: "修改样式",
          user: "开发人员",
          time: "2023.3.25",
          dec: "修改control页面的样式",
        },
        {
          behavior: "修改header组件",
          user: "开发人员",
          time: "2023.01.03",
          dec: "修改header组件的定时器时间",
        },
        {
          behavior: "修改",
          user: "管理员",
          time: "2023.01.03",
          dec: "修改用户user1名字",
        },
        {
          behavior: "修改",
          user: "管理员",
          time: "2023.01.03",
          dec: "修改用户user1名字",
        },
        {
          behavior: "修改",
          user: "管理员",
          time: "2023.01.03",
          dec: "修改用户user1名字",
        },
      ],
      // 自主选择要导出的字段，若不指定，默认导出全部数据中心全部字段
      // json_fields:{},
    };
  },
  methods: {
    // 表单样式改变
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else if (rowIndex % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 分页当前页变化
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "persdsd",
      })
        .then(() => {
          console.log(index, row);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .el-table::before {
  height: 0;
}
/deep/ .el-table {
  border-radius: 20px;
}
/deep/ .el-table tr {
  background-color: #1e1f25;
}

/deep/ .el-table,
.el-table__expanded-cell {
  background-color: #1e1f25;
}
/deep/ .el-table__row .cell {
  padding: 0 10px;
}

/deep/ .el-table .warning-row {
  // background: rgb(50, 50, 51);
  background: #272c37;
}

/deep/ .el-table .success-row {
  // background: #272829;
  background: #3d4254;
}
.fontStyle {
  // font-size: 16px;
  font-size: 18px;
  font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
  font-weight: normal;
  color: #ffffff;
}
// 表单所有字体
/deep/ .el-table .cell {
  .fontStyle();
  color: #cccccc;
}
// 表头所有字体
/deep/ .has-gutter .cell {
  font-weight: 400;
  .fontStyle();
  color: #ffffff;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #1e1f25 !important;
}

.pagenation-box {
  width: 550px;
  margin-right: 150px;
  margin-left: auto;
}

.controlImage {
  img {
    margin-left: 10px;
  }
}

.table-top {
  display: flex;
  justify-content: space-between;
  .inputBox {
    margin-bottom: 20px;

    /deep/ .el-input {
      width: 260px;
      height: 40px;
      background: #282c38;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      // border: 1px solid #3c4254;
    }
    /deep/ .el-input__inner {
      background: #282c38;
      border: 1px solid #3c4254;
      border-radius: 10px 10px 10px 10px;
      padding-left: 35px;
      // border: none;

      font-size: 18px;
      font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
      font-weight: normal;
      color: #ffffff;
      line-height: 0px;
    }
  }
  .chooseTime {
    display: flex;
    /deep/ .el-input__inner {
      background: #282c38;
      border: 1px solid #3c4254;
      // border: none;
    }
    /deep/ .el-date-editor .el-range-separator {
      color: #ffffff;
    }
    /deep/ .el-range-editor .el-range-input {
      background-color: #282c38;
      color: #ffffff;
    }
    /deep/ .el-date-editor--daterange {
      background-color: none;
    }

    .el-button {
      margin-left: 20px;
      background: #078787;
      border: #078787 1px solid;

      font-size: 16px;
      font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
      font-weight: normal;
      color: #ffffff;
    }
  }
}
</style>
